<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>AI Terminal</title>
  <script src="./wind.js"></script>
  <script src="./tailwind_expand.js"></script>
  
  <link rel="stylesheet" href="./font-awesome.css">
  <link rel="stylesheet" href="./custom.css">
  <script src="./vue.js"></script>
  <script src="./ansi_up.js"></script>
</head>

<body>
  <div id="app">
  <div class="main-container bg-gray-700">
    <div class="min-h-screen bg-gray-800 text-gray-100">
      <div class="title-bar bg-gray-700" id="drag-area" ondblclick="window.pywebview.api.toggle_fullscreen()">
        <div class="text-sm text-gray-300">AI Terminal v1.0</div>
        <div class="window-controls">
          <button class="window-btn minimize-btn" onclick="window.pywebview.api.minimize_window()"></button>
          <button class="window-btn maximize-btn" onclick="window.pywebview.api.toggle_fullscreen()"></button>
          <button class="window-btn close-btn" onclick="window.pywebview.api.close_window()"></button>
        </div>
      </div>
      <div class="flex h-screen">
        <!-- 左侧AI聊天区域 -->
        <div class="flex flex-col rounded-l-lg" style="width: 40%;" id="leftPanel">
          <!-- 顶部配置栏 -->
          <div class="h-14 px-4 flex items-center justify-between bg-gray-800 border-b border-gray-700">
            <div class="flex items-center gap-2">
              <select class="w-40" id="modelSelect" style="padding: 5px 0px 5px 5px;" 
                v-model="selectedModelValue" @change="updateModelForm">
                <option v-for="model in modelOptions" :value="model.value">{{ model.label }}</option>
              </select>
            </div>
            <div class="flex items-center gap-2">
              <!-- 新增的新建会话按钮 -->
              <button class="text-gray-400 hover:text-white p-1" id="newChatBtn" @click="newChatSession()" 
                title="新建会话">
                <i class="fas fa-plus icon" style="pointer-events: none;"></i>
              </button>
              <button class="text-gray-400 hover:text-white p-1" id="historyBtn" onclick="openHistoryDrawer()"
                title="历史会话">
                <i class="fas fa-history icon" style="pointer-events: none;"></i>
              </button>
              <button class="text-gray-400 hover:text-white p-1" id="settingsBtn" onclick="openSettings()" title="设置">
                <i class="fas fa-cog icon" style="pointer-events: none;"></i>
              </button>
            </div>
          </div>

          <!-- 历史会话抽屉 -->
          <div id="historyDrawer" class="fixed top-0 left-0 h-full w-80 bg-gray-800 shadow-lg transform -translate-x-full transition-transform duration-300 z-10">
            <div class="p-4 h-full flex flex-col">
                <div class="flex justify-between items-center mb-4">
                    <h3 class="text-lg font-medium">会话列表</h3>
                    <button onclick="closeHistoryDrawer()" class="text-gray-400 hover:text-white p-1">
                        <i class="fas fa-times"></i>
                    </button>
                </div>
                <div class="flex-1 overflow-y-auto" id="sessionList">
                    <div v-for="session in sessions" :key="session.id" 
                         class="p-3 mb-2 bg-gray-700 rounded cursor-pointer hover:bg-gray-600"
                         :class="{ 'border border-blue-500': currentSessionId === session.id }"
                         @click="switchSession(session.id)">
                        <div class="flex justify-between items-center">
                            <span class="text-sm font-medium">{{ session.name }}</span>
                            <div class="flex items-center gap-2">
                                <span class="text-xs text-gray-400">{{ new Date(session.createdAt).toLocaleDateString() }}</span>
                                <button class="text-red-400 hover:text-red-300 ml-2" 
                                        @click.stop="deleteSession(session.id)">
                                    <i class="fas fa-trash"></i>
                                </button>
                            </div>
                        </div>
                        <div class="text-xs text-gray-400 mt-1 truncate">
                            最后消息: {{ session.msgs[session.msgs.length - 1]?.content || '无消息' }}
                        </div>
                    </div>
                </div>
            </div>
        </div>
          <!-- 聊天消息区域 -->

          <div class="flex-1 overflow-y-auto px-4 py-2" id="chatContainer">
            <div v-for="msg in msgs" :key="msg.id" class="mb-4" :class="msg.type === 'ai' ? 'max-w-[80%] mr-auto' : 'max-w-[80%] ml-auto'">
                <div class="p-3 rounded-lg" :class="msg.type === 'ai' ? 'bg-gray-700' : 'bg-blue-600'">
                    <div class="text-sm" v-html="msg.content"></div>
                    <div v-if="msg.command" class="mt-2 bg-gray-900 p-2 rounded">
                        <pre><code>{{msg.command}}</code></pre>
                    </div>
                    <!-- 添加思考动画 -->
                    <div v-if="msg.isThinking" class="flex items-center mt-1">
                        <div class="thinking-dots">
                            <div class="dot"></div>
                            <div class="dot"></div>
                            <div class="dot"></div>
                        </div>
                    </div>
                </div>
            </div>
          </div>

          <!-- 底部输入区域 -->
          <div class="p-4 bg-gray-800 border-t border-gray-700">
            <textarea rows="3" placeholder="输入您的问题..." class="mb-2" id="messageInput" v-model="msg" @keypress.enter="sendMsg"></textarea>
            <div class="flex justify-between items-center">
              <div class="flex gap-2">
                <button
                  class="button btn-default !rounded-button hover:bg-gray-600 active:bg-gray-700 transition-colors"
                  id="clearBtn" @click="clearMessages">
                  <i class="fas fa-trash icon mr-1" style="pointer-events: none;"></i>清空对话
                </button>
                <button
                  class="button btn-default !rounded-button hover:bg-gray-600 active:bg-gray-700 transition-colors"
                  id="retryBtn">
                  <i class="fas fa-redo icon mr-1" style="pointer-events: none;"></i>重试
                </button>
              </div>
              <div class="flex gap-2">
                <button
                  class="button btn-primary !rounded-button hover:bg-blue-600 active:bg-blue-900 transition-colors"
                  id="recordBtn">
                  <i class="fas fa-microphone icon mr-1" style="pointer-events: none;"></i>语音
                </button>
                <button
                  class="button btn-primary !rounded-button hover:bg-blue-600 active:bg-blue-900 transition-colors"
                  id="sendBtn" @click="sendMsg">
                  发送<i class="fas fa-paper-plane icon ml-1" style="pointer-events: none;"></i>
                </button>
              </div>
            </div>
          </div>
        </div>

        <!-- 拖动调整器 -->
        <div style="border-radius: 5px;" class="w-1 bg-gray-700 cursor-col-resize hover:bg-blue-500 transition-colors"
          id="resizer"></div>
        <!-- 右侧SSH终端区域 -->
        <div class="flex flex-col rounded-r-lg" id="rightPanel" style="width: 60%;">
          <!-- 终端工具栏 -->
          <div class="flex flex-col bg-gray-800 border-b border-gray-700">
            <div class="h-14 px-4 flex items-center justify-between">
              <div class="flex items-center gap-4">
                <div class="flex items-center gap-2">
                  <div class="w-2 h-2 rounded-full" 
                       :class="{
                         'bg-red-500': getCurrentTerminalTab().connection.status === 'disconnected',
                         'bg-yellow-500': getCurrentTerminalTab().connection.status === 'connecting',
                         'bg-green-500': getCurrentTerminalTab().connection.status === 'connected',
                         'bg-gray-500': !activeTerminalTabId
                       }" 
                       id="connectionStatus"></div>
                  <span class="text-sm">
                    {{ getCurrentTerminalTab().connection.status === 'disconnected' ? '未连接' : 
                       getCurrentTerminalTab().connection.status === 'connecting' ? '连接中' : 
                       getCurrentTerminalTab().connection.status === 'error' ? '连接失败':
                       getCurrentTerminalTab().connection.status === 'connected' ? '已连接' : '无终端'
                       
                      
                      }}
                  </span>
                </div>
                <button class="text-gray-400 hover:text-green-500 p-1" id="connectBtn" title="重新连接" 
                        @click="connectTerminal(getCurrentTerminalTab())"
                        :disabled="!activeTerminalTabId || getCurrentTerminalTab().connection.status === 'connected'">
                  <i class="fas fa-link icon" style="pointer-events: none;"></i>
                </button>
              </div>
              <button class="text-gray-400 hover:text-blue-500 p-1" id="newTerminalBtn" onclick="toggleTerminalDrawer()"
                title="终端列表">
                <i class="fas fa-list icon" style="pointer-events: none;"></i>
              </button>
            </div>

            <!-- 终端Tab页 -->
            <div class="flex items-center px-2" id="terminalTabs">
                <div v-for="tab in terminalTabs" 
                      :key="tab.id"
                      class="px-3 py-2 flex items-center gap-2 cursor-pointer text-sm"
                      :class="{ 'bg-gray-900 text-white': tab.active, 'text-gray-400': !tab.active }"
                      @click="switchTerminalTab(tab.id)">
                    <span>{{ tab.name }}</span>
                    <button @click.stop="closeTerminalTab(tab.id)" class="text-gray-400 hover:text-red-500">
                        <i class="fas fa-times"></i>
                    </button>
                </div>
                <button  id="newTerminalBtn2" onclick="toggleTerminalDrawer()" class="px-2 text-gray-400 hover:text-white">
                    <i class="fas fa-plus" style="pointer-events: none;"></i>
                </button>
            </div>
          </div>
          <!-- 终端显示区域 -->
          <div @click="focusTerminalInput" class="flex-1 bg-black p-2 font-mono text-sm overflow-auto" id="terminalOutput">
              <!-- 显示当前Tab的历史命令和输出 -->
              <div v-for="(line, index) in getCurrentTerminalContent().lines" 
                   :key="index" 
                   class="terminal-line mb-1"
                   :class="'terminal-line-' + line.type" @click.stop>
                  <!-- <span v-if="line.prompt" class="terminal-prompt">
                      <span class="text-green-500">{{ line.prompt.user }}</span>
                      <span class="text-gray-400">:</span>
                      <span class="text-blue-400">{{ line.prompt.path }}</span>
                      <span class="text-gray-400">$ </span>
                  </span>
                  <span v-if="line.type === 'command'">{{ line.content }}</span> -->
                  <pre class="terminal-output inline-block selectable-text" v-html="line.content"></pre>
                  <div v-if="index === getCurrentTerminalContent().lines.length - 1" 
                       class="inline-flex items-center terminal-input-line">
                      <input type="text" 
                             v-model="getCurrentTerminalContent().currentInput"
                             @keyup.enter="executeTerminalCommand"
                             class="terminal-input">
                  </div>
              </div>
              <!-- 当前输入行 -->
              <!-- <div class="flex items-center terminal-input-line"> -->
                  <!-- <span class="terminal-prompt">
                      <span class="text-green-500">{{ getCurrentPrompt().user }}</span>
                      <span class="text-gray-400">:</span>
                      <span class="text-blue-400">{{ getCurrentPrompt().path }}</span>
                      <span class="text-gray-400">$ </span>
                  </span> -->
                  <!-- <input type="text" 
                         v-model="getCurrentTerminalContent().currentInput"
                         @keyup.enter="executeTerminalCommand"
                         class="terminal-input flex-1">
              </div> -->
          </div>

          <!-- 终端抽屉 -->
          <div id="terminalDrawer" class="fixed top-0 right-0 h-full w-80 bg-gray-800 shadow-lg transform translate-x-full transition-transform duration-300 z-10">
              <div class="p-4 h-full flex flex-col">
                  <div class="flex justify-between items-center mb-4">
                      <h3 class="text-lg font-medium">终端配置</h3>
                      <button onclick="toggleTerminalDrawer()" class="text-gray-400 hover:text-white ">
                          <i class="fas fa-times"  style="pointer-events: none;"></i>
                      </button>
                  </div>

                  <!-- 新建终端表单 -->
                  <div class="bg-gray-700 p-4 rounded mb-4">
                      <h4 class="text-sm font-medium mb-3">新建终端</h4>
                      <div class="space-y-3">
                          <div>
                              <label class="block text-xs mb-1">配置名称</label>
                              <input v-model="newTerminalConfig.name" type="text" class="w-full bg-gray-600 rounded px-3 py-2 text-sm" placeholder="我的服务器">
                          </div>
                          <div>
                              <label class="block text-xs mb-1">IP地址</label>
                              <input v-model="newTerminalConfig.ip" type="text" class="w-full bg-gray-600 rounded px-3 py-2 text-sm" placeholder="192.168.1.1">
                          </div>
                          <div>
                              <label class="block text-xs mb-1">端口</label>
                              <input v-model="newTerminalConfig.port" type="text" class="w-full bg-gray-600 rounded px-3 py-2 text-sm" placeholder="22">
                          </div>
                          <div>
                              <label class="block text-xs mb-1">用户名</label>
                              <input v-model="newTerminalConfig.username" type="text" class="w-full bg-gray-600 rounded px-3 py-2 text-sm" placeholder="root">
                          </div>
                          <div>
                              <label class="block text-xs mb-1">密码</label>
                              <input v-model="newTerminalConfig.password" type="password" class="w-full bg-gray-600 rounded px-3 py-2 text-sm" placeholder="密码">
                          </div>
                          <div>
                              <label class="block text-xs mb-1">协议</label>
                              <select v-model="newTerminalConfig.protocol" class="w-full bg-gray-600 rounded px-3 py-2 text-sm">
                                  <option value="ssh">SSH</option>
                                  <option value="telnet">Telnet</option>
                              </select>
                          </div>
                          <div style="margin-top: 15px;"  class="flex gap-2">
                              <!-- <button @click="addTerminalTab(newTerminalConfig)" 
                              class="button btn-primary w-full hover:bg-blue-600 active:bg-blue-900 transition-colors">
                                  连接并保存
                              </button> -->
                              <button @click="addTerminalTab(newTerminalConfig)" 
                                  class="button btn-primary flex-1 hover:bg-blue-600 active:bg-blue-900 transition-colors">
                                  连接终端
                              </button>
                              <button @click="saveTerminalConfig(newTerminalConfig)" 
                                  class="button btn-primary flex-1 hover:bg-blue-600 active:bg-blue-700 transition-colors">
                                  保存配置
                              </button>
                          </div>
                      </div>
                  </div>

              <!-- 终端配置列表 -->
              <div class="flex-1 overflow-y-auto space-y-2" id="terminalConfigs">
                <div v-for="(config, index) in terminalConfigs" :key="index" 
                     class="p-3 bg-gray-700 rounded cursor-pointer hover:bg-gray-600"
                     @click="loadTerminalConfig(config)">
                  <div class="flex justify-between">
                    <span>{{config.name}} ({{config.ip}}:{{config.port}})</span>
                    <div class="flex gap-2">
                      <!-- <button class="text-blue-400 hover:text-blue-300" @click.stop="editTerminalConfig(config)">
                        <i class="fas fa-edit"></i>
                      </button> -->
                      <button class="text-red-400 hover:text-red-300" @click.stop="deleteTerminalConfig(config.name)">
                        <i class="fas fa-trash"></i>
                      </button>
                    </div>
                  </div>
                  <div class="text-xs text-gray-400 mt-1">{{config.username}}</div>
                </div>
              </div>
            </div>
          </div>
          

          <!-- 终端状态栏 -->
          <div class="h-8 px-4 flex items-center justify-between bg-gray-800 border-t border-gray-700 text-sm">
            <div class="flex items-center gap-4">
              <span v-if="activeTerminalTabId">
                {{ getCurrentTerminalTab().connection.protocol.toUpperCase() }}: 
                {{ getCurrentTerminalTab().connection.ip }}:{{ getCurrentTerminalTab().connection.port }}
              </span>
              <span>UTF-8</span>
            </div>
            <div class="flex items-center gap-2">
              <i class="fas fa-wifi"></i>
              <span>延迟: {{ getCurrentTerminalTab().connection.latency || '--' }}ms</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div id="settingsDrawer"
    class="fixed top-0 left-0 h-full w-96 bg-gray-800 shadow-lg transform -translate-x-full transition-transform duration-300 z-10">
    <div class="p-4 h-full flex flex-col">
      <div class="flex justify-between items-center mb-4">
        <h3 class="text-lg font-medium">系统设置</h3>
        <button @click="closeSettings()" class="text-gray-400 hover:text-white p-1">
          <i class="fas fa-times"></i>
        </button>
      </div>

      <!-- 设置表单 -->
      <div class="bg-gray-700 p-4 rounded mb-4">
        <div class="space-y-4">
          <div>
            <label class="block text-sm mb-2">AI模型</label>
            <select class="w-full bg-gray-600 rounded px-3 py-2" id="modelSelect" v-model="selectedModelValue" @change="updateModelForm">
              <option v-for="model in modelOptions" :value="model.value">{{ model.label }}</option>
            </select>
          </div>
          <div>
            <label class="block text-sm mb-2">API Key</label>
            <input type="password" id="apiKeyInput" class="w-full bg-gray-600 rounded px-3 py-2" 
              v-model="selectedModel.apiKey" placeholder="输入您的API密钥">
          </div>
          <div>
            <label class="block text-sm mb-2">API Endpoint</label>
            <input type="text" id="endpointInput" class="w-full bg-gray-600 rounded px-3 py-2" 
              v-model="selectedModel.endpoint" placeholder="API地址">
            <!-- <div class="text-xs text-gray-400 mt-1 truncate" v-if="selectedModel.endpoint">
              {{ selectedModel.endpoint.length > 30 ? 
                 selectedModel.endpoint.substring(0, 15) + '...' + selectedModel.endpoint.substring(selectedModel.endpoint.length - 15) : 
                 selectedModel.endpoint }}
            </div> -->
          </div>
        </div>
      </div>

      <!-- 配置列表 -->
      <div class="overflow-y-auto">
        <div class="flex justify-between items-center mb-2">
          <label class="block text-sm">自定义参数</label>
          <div class="flex gap-2">
            <input type="text" v-model="newParamKey" class="flex-1 bg-gray-600 rounded px-3 py-2 text-sm" placeholder="参数名">
            <button @click="addCustomParam" class="button btn-default text-xs">
              <i class="fas fa-plus mr-1"></i>添加
            </button>
          </div>
        </div>
        <div id="customParamsContainer" class="space-y-2 mb-4">
          <div v-for="(value, key) in selectedModel.params" :key="key" class="flex items-center gap-2">
            <input type="text" v-model="key" @change="updateParamKey(key, $event)" class="w-1/3 bg-gray-600 rounded px-3 py-2 text-sm">
            <span class="text-gray-400">:</span>
            <input type="text" v-model="selectedModel.params[key]" class="flex-1 bg-gray-600 rounded px-3 py-2 text-sm">
            <button @click="removeCustomParam(key,$event)" class="text-red-400 hover:text-red-300 p-1">
              <i class="fas fa-trash"></i>
            </button>
          </div>
        </div>
        <button class="button btn-primary w-full hover:bg-blue-600 active:bg-blue-900 transition-colors py-3 flex items-center justify-center"
          @click="saveSettings($event)">保存设置</button>
      </div>
      <!-- 移除原来的保存按钮div -->
    </div>
  </div>
  </div>
</div>
  
  <script src="./vueIndex.js"></script>
  <script src="./index.js"></script>
  <script src="./script.js"></script>
</body>

</html>